import React, {Component} from 'react';
import { connect } from 'react-redux';
import {Modal, Button, Checkbox} from 'antd';
import { messages } from 'share/common';
import './style/index.less';
import LoginService from '../../login.service';

//协议语言取浏览器
// let lang = navigator.language;
// let href = 'https://console.huilianyi.com/register/pages/privacy_statement_en.html';
// if (lang === 'zh-CN') {
//   href = 'https://console.huilianyi.com/register/pages/protocol.html';
// }
// if (lang === 'ja') {
//   href = 'https://console.huilianyi.com/register/pages/privacy_statement_ja.html';
// }

class UserProtocol extends Component{
  constructor (props){
    super(props);
    this.state={
      checked: false,
      useCustomProtocol: false,
      customProtocol: null
    }
  }
  componentDidMount(){
    this.getProtocolWithDomain();
  }
  componentWillReceiveProps(nextProps){
    if(this.props.language !== nextProps.language){
      if(this.tenantInfo){
        this.getProtocolWithTenantInfo(this.tenantInfo)
      }else{
        this.getProtocolWithDomain();
      }
    }
  }
  getProtocolWithDomain(){
    LoginService.loginDecide()
      .then(res=>{
        let data= res.data
        if(data){
          this.tenantInfo= data['x-helios-tenant']
          this.getProtocolWithTenantInfo(data['x-helios-tenant'])
        }
      })
  }
  getProtocolWithTenantInfo = (tenantInfo) => {
    LoginService.getProtocolWithTenantInfo(tenantInfo)
      .then(res=>{
        let data= res.data
        if(data){
          data.content= data.content && data.content.replace(/﹤/g, '<').replace(/﹥/g, '>')
          this.setState({
            customProtocol: data
          })
        }
      })
  }
  getProtocolPath = () => {
    let langCode= this.props.language.code
    langCode= langCode.toLowerCase();
    let langMap= {
      'zh_cn': 'https://console.huilianyi.com/register/pages/protocol.html',
      'ja': 'https://console.huilianyi.com/register/pages/privacy_statement_jp.html',
      'en': 'https://console.huilianyi.com/register/pages/privacy_statement_en.html'
    };
    return langMap[langCode] || langMap['en']
  };
  onCheckboxChanged=(value)=>{
    this.setState({
      checked: !value
    })
  }
  toggleProtocol = (flag) => {
    this.setState({
      useCustomProtocol: flag
    })
  }
  render(){
    const {visible, onClose}= this.props;
    const {checked, useCustomProtocol, customProtocol}= this.state
    let customProtocolTitle= (customProtocol && customProtocol.title) || messages('basic-2.key82')/*自定义用户协议*/
    return (
      <Modal
        width={650}
        bodyStyle={{maxHeight: 400,minHeight: 400, overflow: 'hidden', paddingTop: 0}}
        maskClosable={false}
        keyboard={false}
        zIndex={3000}
        title={ useCustomProtocol? customProtocolTitle: messages('helios.login.helios.agreement')/*汇联易用户使用协议*/}
        visible={visible}
        footer={(
          <div className={'footer-wrapper'}>
            <div className="checkbox-group">
              <Checkbox value={checked} onChange={(e)=>this.onCheckboxChanged(e.target.value)}/>
              <span>{messages('basic-2.key83')/*已阅读并同意*/}</span>
              <a onClick={()=>this.toggleProtocol(false)} className="btn-link">《{messages('helios.login.helios.agreement')/*汇联易用户使用协议*/}》</a>
              {customProtocol && <a onClick={()=>this.toggleProtocol(true)} className="btn-link">《{customProtocolTitle}》</a>}
            </div>
            <div className="btn-group">
              <Button onClick={()=>onClose(false)}>{messages('common.cancel')}</Button>
              <Button onClick={()=>onClose(true)} type={'primary'} disabled={!checked}>{messages('common.ok')}</Button>
            </div>
          </div>)}
        onCancel={()=>onClose(false)}>
        {
          useCustomProtocol ?
            <div className={'protocol-wrapper'} dangerouslySetInnerHTML={{__html: customProtocol.content}}/>:
            <iframe src={this.getProtocolPath()} width={600} height={400} style={{border: 'none'}}/>
        }
        
      </Modal>
    )
  }
}

export default UserProtocol;
